<template>
  <div>
    <el-select
        v-model="duty_id"
        v-bind="attrs"
        filterable
        remote
        reserve-keyword
        placeholder="请输入关键词"
        :remote-method="remote_method"
        :loading="state.loading">
      <el-option
          v-for="item in state.dataList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script setup name="selectDutyList">
import {computed, onMounted, reactive, useAttrs, watch} from 'vue';
import {dutyApi} from "/@/api/hrms/duty"

const attrs = useAttrs()

const props = defineProps({
  departmentList: {
    type: Array,
    default: () => []
  }, duty_id: {
    type: String,
    default: () => null
  }
})


// 获取岗位信息
const remote_method = (queryString) => {
  // tableRef.value.openLoading()
  if (queryString) {
    state.loading = true

    setTimeout(() => {
      state.loading = false
      state.dataList = state.dutyList.filter(item => {
        return item.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1
      })
    }, 200)

  } else {
    state.dataList = []
  }
};

const searchDuty = () => {
  dutyApi().dutyList(state.listQuery)
      .then(res => {
        const data = res.data.rows
        state.dutyList = data.map(item => {

          return {id: item.id, name: item.name}
        })
        console.log('岗位数据：state.dataList', state.dutyList,'data数据：',data)

      })
      .finally(() => {
        // tableRef.value.closeLoading()
      })
}

const state = reactive({
  // 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由组织格式
  rules: {
    name: [{required: true, message: '请输入组织名称', trigger: 'blur'},],
    // parent_id: [{required: true, message: '请选择上级组织', trigger: 'blur'},]
  },
  dataList: [],
  dutyList: [],
  timeout: null,
  duty_id: null,
  loading: false,
  listQuery: {
    name: ""
  }
});


const emits = defineEmits([
  "update:modelValue", "change",
])

watch(
    () => props.duty_id,
    () => {
    },
    {deep: true}
)

let duty_id = computed({
  get() {
    return props.duty_id
  },
  set(val) {
    emits('update:modelValue', val)
  }
})


// 页面加载时
onMounted(() => {
  searchDuty();
});


</script>
